import React, {useCallback, useEffect } from 'react';
import { getLsMealHistoryOverviewGuard } from '../../api'
import * as echarts from 'echarts';
import {
    ImportAntExportEchartsAll
} from './style'
import { message, PageHeader } from 'antd'


const AddMealEcharts = () => {
    const eChartsFun = useCallback(
        () => {
            ; (async () => {
                const { code, msg, data } = await getLsMealHistoryOverviewGuard()
                if (code === '20000') {
                    let xData = [];
                    let yData = [];
                    data.forEach(element => {
                        xData.push(element.date)
                        yData.push(element.len)
                    });
                    var chartDom = document.getElementById('main');
                    var myChart = echarts.init(chartDom);
                    var option;
                    option = {
                        tooltip: {
                            trigger: 'axis'
                        },
                        xAxis: {
                            type: 'category',
                            name: '日期',
                            data: xData
                        },
                        yAxis: {
                            name: '数量',
                            type: 'value'
                        },
                        series: [{
                            name: '进出数量',
                            data: yData,
                            type: 'line'
                        }]
                    };

                    option && myChart.setOption(option);
                } else {
                    message.error(msg)
                }
            })()

        },
        [],
    )
    useEffect(() => {
        eChartsFun()
    }, [eChartsFun])
    return <ImportAntExportEchartsAll>
        <PageHeader
            className="site-page-header"
            title="报餐统计概况"
        />
        <div id='main' style={{ width: '880px', height: '500px' }}></div>
    </ImportAntExportEchartsAll>
}

export default AddMealEcharts